<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="right_content">
    <!-- 页头标题 -->
    <div class="h_heard_title">通道参数</div>
    <div style="height: 25vh">
      <div v-if="selectedChannel.key">
        <div class="h_info">
          <text style="width: 60px">id</text>
          <text style="width: 100%">{{ selectedChannel.key }}</text>
        </div>
        <div class="h_info">
          <text style="width: 60px">类型</text>
          <text style="width: 100%">{{ selectedChannel.type }}</text>
        </div>
        <div class="h_flex_row" style="margin-top: 5px">
          <text style="width: 100px">使能状态</text>
          <NSwitch style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedChannel.active" />
        </div>
        <div class="h_flex_row" style="margin-top: 5px">
          <text style="width: 100px">描述</text>
          <NInput style="width: 100%" type="text" v-model:value="selectedChannel.label" />
        </div>
        <div class="h_flex_row" style="margin-top: 5px">
          <text style="width: 100px">IP地址</text>
          <NInput style="width: 100%" type="text" v-model:value="selectedChannel.ip_addr" />
        </div>

        <div class="h_flex_row" style="margin-top: 5px">
          <text style="width: 100px">CPU插槽</text>
          <NInputNumber style="width: 100%" :min="0" v-model:value="selectedChannel.cpu_slot" />
        </div>
      </div>
      <svg v-else style="margin-left: 30px; margin-top: 30px; width: 160; height: 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1" viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('noneDataIcon')"></svg>
    </div>
    <!-- 分界线 -->
    <div class="h_heard_title">通道</div>
    <!-- 树 -->
    <n-tree ref="TreeRef" virtual-scroll style="height: 58vh" block-line animated default-expand-all :data="channels"
      :node-props="onNodeNavigation" />
    <n-dropdown trigger="manual" placement="bottom-start" :show="dropdownMenu" :options="(optionsRef as any)" :x="xRef"
      :y="yRef" @select="onHandleSelect" @clickoutside="handleClickoutside" />
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";
import { TreeOption, TreeSelectOption, DropdownOption } from "naive-ui";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetUUID, // 获取UUID
  onGetDataManagerIcon,
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useWorkStore } from "@/store/workStore"; // 设备数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const workStore = useWorkStore(); // 设备数据

/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 图标尺寸 */
const IconSize = 200;
/** 坐标x */
let xRef = ref(0);
/** 坐标y */
let yRef = ref(0);
/**下拉菜单 */
let dropdownMenu = ref(false);
/** 下拉菜单选项 */
const optionsRef = ref<DropdownOption[]>([]);
/**选择的键 */
const selectKey = ref("");
/** 通道树 */
const channels = computed(() => workStore.channels);
/** 选择的通道 */
const selectedChannel = computed(() => canvasStore.selectedChannel);
/** 罗克韦尔PLC菜单 */
const AB_PLClMenu = [
  {
    label: "罗克韦尔PLC",
    key: "menu",
    disabled: true,
  },
  {
    label: "取消",
    key: "cancel",
  },
  {
    label: "添加ControlLogix型PLC",
    key: "AB_PLC_Control",
    props: {
      onClick: () => {
        onAddChannel("AB_PLC_Control"); //添加通道
      },
    },
  },
  {
    label: "添加CompactLogix型PLC",
    key: "AB_PLC_Compact",
    props: {
      onClick: () => {
        onAddChannel("AB_PLC_Compact"); //添加通道
      },
    },
  },
  {
    label: "添加Micro8xx型PLC",
    key: "AB_PLC_Micro",
    props: {
      onClick: () => {
        onAddChannel("AB_PLC_Micro"); //添加通道
      },
    },
  },
];
/** 设备菜单 */
const equiplMenu = [
  {
    label: "设备菜单",
    key: "menu",
    disabled: true,
  },
  {
    label: "删除设备",
    key: "delete",
    props: {
      onClick: () => {
        onDeleteChannel(selectKey.value); //添加通道
      },
    },
  },
];
/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */

/** 节点导航 */
const onNodeNavigation = ({ option }: { option: TreeOption }) => {
 // console.log("节点导航")
  return {
    onClick: () => {
      // console.log("点击事件")
      if (option.isLeaf) {
        // console.log(option)
        selectKey.value = String(option.key); //选择的键
        canvasStore.selectedChannel = option; //选择的通道
      }
    },
    onContextmenu(e: MouseEvent): void {
      e.preventDefault();
     // console.log(option)
      if (Number(option.category) > 0) {
        selectKey.value = String(option.key); //选择的键
        canvasStore.selectedChannel = option; //选择的设备
        if (!option.isLeaf && option.key === "AB_PLC") {
          optionsRef.value = AB_PLClMenu;
        }
        if (option.isLeaf) {
          optionsRef.value = equiplMenu;
        }
        dropdownMenu.value = true; //显示下拉菜单
        xRef.value = e.clientX;
        yRef.value = e.clientY;
       // console.log(e.clientX, e.clientY)
      } else {
        canvasStore.selectedChannel = {};
      }
    },
  };
};

/** 选择 */
const onHandleSelect = () => {
 // console.log("选择")
 // console.log(optionsRef.value)
  dropdownMenu.value = false;
};

/** 出边界的点击 */
const handleClickoutside = () => {
 // console.log("出边界的点击")
  dropdownMenu.value = false; //隐藏下拉菜单
};

/** 添加通道 */
const onAddChannel = (ChannelType: string) => {
 // console.log("添加通道")
 // console.log(Type)
  if (ChannelType === "AB_PLC_Control") {
    workStore.channels[0].children[0].children.push({
      label: "ControlLogix型PLC",
      key: onGetUUID(),
      type: "AB_PLC_Control",
      isLeaf: true,
      active: true,
      category: 2,
      ip_addr: "192.168.1.153",
      cpu_slot: 0,
    });
  }
  if (ChannelType === "AB_PLC_Compact") {
    workStore.channels[0].children[0].children.push({
      label: "CompactLogix型PLC",
      key: onGetUUID(),
      type: "AB_PLC_Compact",
      isLeaf: true,
      active: true,
      category: 2,
      ip_addr: "192.168.0.3",
      cpu_slot: 1,
    });
  }
  if (ChannelType === "AB_PLC_Micro") {
    workStore.channels[0].children[0].children.push({
      label: "Micro8xx型PLC",
      key: onGetUUID(),
      type: "AB_PLC_Micro",
      isLeaf: true,
      active: true,
      category: 2,
      ip_addr: "192.168.0.3",
      cpu_slot: 2,
    });
  }
};

/** 迭代-删除通道 */
const iterationDelete = (iterationData: any, id: string) => {
 // console.log("迭代-删除通道")

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 ★迭代-遍历
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  for (let indexA = 0; indexA < iterationData.length; indexA++) {
   // console.log("迭代-1级遍历")
    const elementA = iterationData[indexA];
   // console.log(elementA)
    if (String(elementA.key) === id) {
     // console.log("满足条件")
      iterationData.splice(indexA, 1);
    }
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 迭代
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    try {
      if (elementA.children.length > 0) {
        let childrens = elementA.children;
        iterationDelete(childrens, id);
      }
    } catch (error) { }
  }
};

/** 删除通道 */
const onDeleteChannel = (id: string) => {
 // console.log("删除通道")
 // console.log(id)

  /** 通道 */
  let copyChannels = workStore.channels;
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  for (let indexA = 0; indexA < copyChannels.length; indexA++) {
   // console.log("1级遍历");
    const elementA = copyChannels[indexA];
   // console.log(elementA);
    if (String(elementA.key) === id) {
     // console.log("满足条件");
      copyChannels.splice(indexA, 1);
    }
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 迭代
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    try {
      if (elementA.children.length > 0) {
        let childrens = elementA.children;
        iterationDelete(childrens, id);
      }
    } catch (error) { }
  }

 // console.log(copyChannels)
};


</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
.right_content {
  width: 100%;
  height: 100%;
  background-color: rgb(80,80,80);
  font-size: 14px;
  color: #ffffff;
  user-select: none;
}

/* 参数 */
.h_info {
  padding: 5px;
  width: 100%;

  user-select: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
}

/* 参数标题 */
.h_info_lable {
  padding-left: 3px;
  width: 150px;
}

/* 参数变量 */
.h_info_val {
  width: 100%;
  margin-right: 5px;
}
</style>
